<style>
#login{margin: 0 auto;padding: 0;width: 420px;}
#login div.color{left: auto;right: auto;margin: 10px auto 0 auto;padding: 3px 3px 3px 0;clear: both;overflow: hidden;background: #FFFFFF;}
#login div.color a{margin: 0 0 0 3px;padding: 0;width: 20px;height: 20px;display: block;float: left;}
#login div.inner{margin: 0 auto;padding: 20px;width: 380px;border-top: none;border-bottom: none;}
#login div.form{margin: 0;padding: 0;clear: both;overflow: hidden;}
#login div.form div.fields{margin: 0;padding: 0;clear: both;overflow: hidden;}
#login div.form div.fields div.field{margin: 0;padding: 0 0 10px 0;clear: both;overflow: hidden;}
#login div.form div.fields div.field span.error{margin: 8px 0 0 0;padding: 0;height: 1%;display: block;color: #FF0000;}
#login div.form div.fields div.field label.error{margin: 8px 0 0 0;padding: 0;height: 1%;display: block;color: #FF0000;}
#login div.form div.fields div.field div.label{margin: 2px 10px 0 0;padding: 5px 0 0 5px;width: 173px;float: left;text-align: right;}
#login div.form div.fields div.field div.label label{color: #000000;font-weight: bold;}
#login  div.form div.fields div.field div.label span{margin: 0;padding: 2px 0 0 0;height: 1%;display: block;color: #363636;}
#login div.form div.fields div.field div.input{margin: 0;padding: 0;float: left;}
#login div.form div.fields div.field div.input input{margin: 0;padding: 7px 7px 6px 7px;width: 176px;background: #FFFFFF;border-top: 1px solid #b3b3b3;border-left: 1px solid #b3b3b3;border-right: 1px solid #eaeaea;border-bottom: 1px solid #eaeaea;color: #000000;font-family: Lucida Grande, Verdana, Lucida Sans Regular, Lucida Sans Unicode, Arial, sans-serif;font-size: 11px;}
#login div.form div.fields div.field div.input  input.error{background: #FBE3E4;border-top: 1px solid #e1b2b3;border-left: 1px solid #e1b2b3;border-right: 1px solid #FBC2C4;border-bottom: 1px solid #FBC2C4;}
#login div.form div.fields div.field div.input  input.success{background: #E6EFC2;border-top: 1px solid #cebb98;border-left: 1px solid #cebb98;border-right: 1px solid #c6d880;border-bottom: 1px solid #c6d880;}
#login div.form div.fields div.field div.input div.link{margin: 6px 0 0 0;padding: 0;text-align: right;}
#login div.form div.fields div.field div.checkbox{margin: 0 0 0 184px;padding: 0;}
#login div.form div.fields div.field div.checkbox label{color: #565656;font-weight: bold;}
#login div.form div.fields div.buttons{margin: 0;padding: 10px 0 0 0;clear: both;overflow: hidden;border-top: 1px solid #DDDDDD;text-align: right;}
#login div.form div.fields div.buttons input{margin: 0;color: #000000;font-size: 1.0em;font-weight: bold;font-family: Verdana, Helvetica, Sans-Serif;}
#login div.form div.fields div.buttons input.ui-state-default{margin: 0;padding: 6px 12px 6px 12px;background-color:#e5e3e3;border-top: 1px solid #DDDDDD;border-left: 1px solid #c6c6c6;border-right: 1px solid #DDDDDD;border-bottom: 1px solid #c6c6c6;color: #515151;}
#login div.form div.fields div.buttons input.ui-state-hover{margin: 0;padding: 6px 12px 6px 12px;background-color: #b4b4b4;border-top: 1px solid #cccccc;border-left: 1px solid #bebebe;border-right: 1px solid #b1b1b1;border-bottom: 1px solid #afafaf;color: #515151;}
#login div.form a:link, #login div.form a:visited{margin: 0;padding: 0 0 2px 0;clear: both;overflow:hidden;color:#006;}
</style>
<h5>Login</h5>
<div id="login">
<div class="inner">
<!--    <form accept-charset="utf-8" action="<?php //echo Configure::read('base_url')."users/login";?>" method="post" id="UserLoginForm">-->
				<?php echo $form->create('User', array('action' => 'login')); ?>
				<div class="form">
					<!-- fields -->
					<div class="fields">
						<div class="field">
							<div class="label">
								<label for="username">User ID:</label>
							</div>
							<div class="input">
                                                            <?php  echo $form->input('username',array('div'=>false,'id'=>'username','size'=>40,'label'=>false,'class'=>'required'));?>
								
							</div>
						</div>
						<div class="field">
							<div class="label">
								<label for="password">Password:</label>
							</div>
							<div class="input">
								<?php  echo $form->input('password',array('div'=>false,'id'=>'password','size'=>40,'label'=>false,'class'=>'required'));?>
							</div>
						</div>
						<div class="field">
							<div class="checkbox">
								<?php echo $form->input('User.remember_me', array('label' =>FALSE,'div'=>false,'type' => 'checkbox'));?>
								<label for="remember">Remember me</label>
							</div>
						</div>
						<div class="buttons">
							<input type="submit" value="Sign In" class="ui-button ui-widget ui-state-default ui-corner-all">
						</div>
					</div>
					<!-- end fields -->
					<!-- links -->
					<div class="links" >
                     <a href="javascript:void(0);" controller="users" action="forget_password" title="forget_password"  onclick='showPop(this)'>Forgot your password?</a>
					</div>
					<!-- end links -->
				</div>
				</form>
			</div>
</div>
<?php  echo $html->script(array("jquery.min.js","jquery.form.js","jquery.validate.js","jquery.pagination.js","jquery-ui.js")); ?>
 <script type="text/javascript">
     function pageselectCallback(page_index, jq, items_per_page){
		page_index = page_index ==0 ? 1 : (page_index+1);
		var startIndex = parseInt(((page_index - 1) * items_per_page));
		var endIndex = parseInt(((page_index) * items_per_page));
		jQuery('#Searchresult ul').empty();
		jQuery('#hiddenresult ul li').each(function(i,obj){
			if(startIndex <= i && i < endIndex ){
				var new_content = jQuery(obj).clone();
				jQuery('#Searchresult ul').append(new_content);
			}
		});
		var totalPage = 0;
		try{
			totalPage = Math.ceil(parseInt(jQuery('#hiddenresult ul li').size())/items_per_page);
		}catch(ex){

		}
		jQuery('#pagePositionNum').empty().html('Page '+page_index+' of '+totalPage);
		return false;
	}
 jQuery(document).ready(function(){
      jQuery('#viewNumPageItem ul li a').live('click',function(){
                    var $href = jQuery(this).attr('href');
                    $href = parseInt($href.replace('#',''));
                    // count entries inside the hidden content
                    var num_entries = jQuery('#hiddenresult ul li').length;

                    // Create content inside pagination element
                    jQuery("#Pagination").empty().pagination(num_entries, {
                        callback: pageselectCallback,
                        items_per_page: $href // Show only one item per page
                    });
                    jQuery(this).closest('ul').find('li span').each(function(i,$this){
                        var pageNum = jQuery(this).html();
                        jQuery(this).closest('li').empty().html('<a href="#'+pageNum+'">'+pageNum+'</a>');
                    });
                    jQuery(this).closest('li').empty().html('<span>'+$href+'</span>');
                    return false;
                }).eq(0).trigger('click') ;

                jQuery('#gotoPage button').click(function(){
                    var $pageNum = parseInt(jQuery('#gotoPage input[type=text]').val());
                    $pageNum = $pageNum - 1;
                    jQuery("#Pagination").trigger('setPage', [$pageNum]);
                });
                //initPagination();

	var v = jQuery("#UserLoginForm").validate({	});	
  });
 </script>